<template>
  <div style="position: relative; height: 50%; margin-bottom: 15px">
    <span
      class="recognition"
      style="position: absolute; top: 18px; left: 15px; z-index: 999"
    ></span>
    <div id="echartSectorDiagram" class="echarts-style-SectorDiagram"></div>
  </div>
</template>

<script>
export default {
    props: ["SectorDiagram"],
  data() {
    return {
      myChart1: null,
      option: {
        title: [
          {
            text: `型号销售数量`,
            left: 30,
            textStyle: {
              fontWeight: 400,
              lineHeight: 34,
              color: "#FFF",
              fontSize: 16,
            },
          },
        ],
        color:["#3A6fA7","#17A1E3","#2299F0","#2AF2Fc","#04E38A"],
        tooltip: {
          trigger: "item",
        },
        legend: {
          show: true,
          left: "50%", //组件离容器左侧的距离,'left', 'center', 'right','20%'
          top: "40", //组件离容器上侧的距离,'top', 'middle', 'bottom','20%'
          left: "center",
          textStyle: {
            fontSize: 12,
            color: "#FFFFFF",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "0%",

          containLabel: true,
        },
        series: [
          {
            name: "销售数量",
            type: "pie",
            radius: "50%",
                center: ["50%", "60%"],
            data: [

            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      },
    };
  },



    watch: {
      SectorDiagram: {
        handler(newVal, oldName) {

            let dataList = []
            let xList = []
            let data = [...newVal]
            xList = data.map(item => {
              dataList.push({
                value: item.ct,
                name: item.equipment_model
              })
              return item.model
            })
            this.option.series[0].data = dataList
            // this.option.legend.data = xList
            this.myChart1 && this.myChart1.setOption(this.option);
      
        },
        //immediate:true代表如果在 wacth 里声明了obj之后，就会立即先去执行里面的handler方法，
        immediate: true,
        deep: true // 开启深度监听，默认是false
      },
    },
  mounted() {
    let that = this;
    this.initDeviceEcharts();
    window.addEventListener("resize", () => {
      // console.log("myChart1")
      that.myChart1.resize();
    });
  },
  methods: {
    initDeviceEcharts() {
      var chartDom = document.getElementById("echartSectorDiagram");
      this.myChart1 = this.$echarts.init(chartDom);

      this.myChart1.setOption(this.option);
    },
  },
};
</script>

<style>
.echarts-style-SectorDiagram {
  width: 100%;
  height: 100%;
  background-color: #072e5f;
  border: 1px solid #072e5f;
  padding: 6px;
  border-radius: 8px;
}
</style>